<template>
  <div class="user-message-container">
    <!-- 筛选条件区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="请输入手机号码">
        <el-input v-model="searchForm.phoneNumber" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格展示区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" wi  dth="120">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称" wi  dth="120">
        <template #default="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="avatarUrl" label="头像" width="120">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="头像" style="max-width: 100%; height: auto;" />
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="150">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="账号状态" width="120">
        <template #default="scope">
          <el-switch
              :model-value="scope.row.status === 1"
              inline-prompt
              :active-text="'是'"
              :inactive-text="'否'"
              @change="(status)=>handlePublishChange(status, scope.row)"
            ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted} from 'vue';
import { ElForm, ElFormItem,  ElInput, ElButton, ElTable, ElTableColumn,ElMessage } from 'element-plus';
import request from '@/utils/request';
const pageSize4 = ref(10);
const total = ref(0);

onMounted(() => {
  fetchData();
});
// 初始化数据
const searchForm = reactive({
  phoneNumber: ''
});

const tableData = ref([

]);
// 分页处理
const currentPage4 = ref(1);
const handleSizeChange = (size) => {
 pageSize4.value = size;
 currentPage4.value = 1;
 fetchData();
};
const handleCurrentChange = (page) => {
 currentPage4.value = page;
};
async function fetchData() {
  try {
   const dataPage = await request.get("/admin/user/page", {
      params: {
        current: currentPage4.value,
        size: pageSize4.value,
      }
    });
    console.log('dataPage:', dataPage);
    if (dataPage.data.code === 200) {
      tableData.value = dataPage.data.data.records || [];
      total.value = dataPage.data.data.total;
    } else {
      ElMessage.error(dataPage.msg || '获取数据失败');
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
// 切换账号状态
const handlePublishChange = async (val, row) => {
  console.log('val:', val);
  console.log('id:', row.id);
  try {
    const res = await request.post(`/admin/user/updateStatusById?id=${row.id}&status=${val ? 1 : 0}`);
    row.status = val ? 1 : 0;
    if (res.data.code === 200) {
      ElMessage.success('操作成功');
    } else {
      ElMessage.error(res.data.msg || '操作失败');
    }
  } catch (error) {
    console.error('Error changing status:', error);
  }
};

// 搜索处理
const handleSearch =async() => {
 const select =  await request.get("/admin/user/page", {
    params: {
      current: currentPage4.value,
      size: pageSize4.value,
      phone: searchForm.phoneNumber
    }
  });
  if (select.data.code === 200) {
    tableData.value = select.data.data.records || [];
    total.value = select.data.data.total;
    ElMessage.success('查询数据成功');
  } else {
    ElMessage.error(select.msg || '查询数据失败');
  }

};

// 重置搜索条件
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  fetchData();
};
</script>

<style scoped>
.user-message-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}
</style>
